<!-- 机构持股汇总 -->
<template>
    <div class="container">
        <div class="tableTab" v-show="tableList.length > 0">
            <span
                class="tableBtn"
                :class="{ on: index == timeIdx }"
                @click="onTime(item, index)"
                v-for="(item, index) in times"
                :key="index"
                >{{ item }}</span
            >
        </div>
        <div class="content" v-show="tableList.length > 0">
            <div class="echar_content">
                <div class="table echar_box" id="echarts"></div>
            </div>
            <div class="table w510">
                <div class="tableTh tableTr flex">
                    <span class="tableTd h34 orgTypeName">机构类型</span>
                    <span class="tableTd h34">持仓家数</span>
                    <span class="tableTd h34">持仓股数(股)</span>
                    <span class="tableTd h34">占流通股比例</span>
                    <span class="tableTd h34">占总股本比例</span>
                </div>
                <div
                    class="tableTr tableBody top flex"
                    v-for="(item, index) in tableList"
                    :key="index"
                >
                    <span class="tableTd h34 orange orgTypeName"
                        >{{ item.orgTypeName }}
                    </span>
                    <span class="tableTd h34 orange">
                        {{ item.hldOrgNum ? item.hldOrgNum : "--" }}
                    </span>
                    <span class="tableTd h34 orange">
                        {{ item.hldTotNumEnd | filterVal("number") }}
                    </span>
                    <span class="tableTd h34 orange">
                        {{ item.hldFlPctEnd | fixNum }}
                    </span>
                    <span class="tableTd h34 orange">
                        {{ item.hldTotPctEnd | fixNum }}
                    </span>
                </div>
                <div
                    class="tableNone orange w510 top"
                    v-if="tableList.length == 0"
                >
                    暂无数据
                </div>
            </div>
        </div>
        <div v-if="tableList.length <1" class="tableNone orange w510 top">
            暂无数据
        </div>
    </div>
</template>
<script>
import { toLocalString, fillNumber } from "../../script/formatNumber";
import {number, changeNumber, f10changeNum} from "../../script/api";
export default {
    data() {
        return {
            timeIdx: 0,

            pieDate: {
                seriesData: [],
            },
            times: [],
            dataList: [],
            tableList: [],
            myChart: null,
            seriesList: [],

            name: "",
        };
    },
    props: ["data"],
    filters: {
        filterVal(ops, num) {
            if (typeof ops == "number") {
                return f10changeNum(ops);
            }
            return ops ? ops : "--";
        },
        fixNum(ops) {
            // if (typeof ops == "number") {
            //     return changeNumber(ops, 1);
            // }
            return ops ? ops.toFixed(2) + "%" : "--";
        },
    },
    watch: {
        data(val) {
            if (val) {
                this.times = this.handler(val);
                this.pieDate.seriesData = [];
                this.handtableData(this.data[this.times[0]]);
                this.inte();
            }
        },
    },
    methods: {
        handler(res) {
            const times = Object.keys(res).sort((a, b) => {
                return new Date(b).getTime() - new Date(a).getTime();
            });
            return times;
        },
        handtableData(dataList) {
            let totalobj = {
                orgTypeName: "合计",
                hldOrgNum: 0,
                hldTotNumEnd: 0,
                hldFlPctEnd: 0,
                hldTotPctEnd: 0,
            };
            let arrOrder = [];
            if (dataList && dataList.length > 0) {
                dataList.map((ele, index) => {
                    let orgType = ele.orgType;
                    if (orgType === "1") {
                        ele.order = 1;
                        ele.orgTypeName = "基金";
                        arrOrder[0] = ele;
                    } else if (orgType === "2") {
                        ele.orgTypeName = "QFII";
                        ele.order = 3;
                        arrOrder[2] = ele;
                    } else if (ele.orgType === "3") {
                        ele.orgTypeName = "社保";
                        ele.order = 5;
                        arrOrder[4] = ele;
                    } else if (ele.orgType === "4") {
                        ele.orgTypeName = "券商";
                        ele.order = 4;
                        arrOrder[3] = ele;
                    } else if (ele.orgType === "5") {
                        ele.orgTypeName = "保险";
                        ele.order = 2;
                        arrOrder[1] = ele;
                    } else if (ele.orgType === "6") {
                        ele.orgTypeName = "信托";
                        ele.order = 6;
                        arrOrder[5] = ele;
                    } else if (ele.orgType === "7") {
                        ele.other = true;
                        ele.order = 7;
                        arrOrder[6] = ele;
                        ele.orgTypeName = "其他机构";
                    }

                    // ele.hldOrgNum = ele.hldOrgNum ? ele.hldOrgNum : 0;
                    // ele.hldTotNumEnd = ele.hldTotNumEnd ? ele.hldTotNumEnd : 0;
                    // ele.hldFlPctEnd = ele.hldFlPctEnd ? ele.hldFlPctEnd : 0;
                    // ele.hldTotPctEnd = ele.hldTotPctEnd ? ele.hldTotPctEnd : 0;
                    totalobj.hldOrgNum = totalobj.hldOrgNum + ele.hldOrgNum;
                    totalobj.hldTotNumEnd =
                        totalobj.hldTotNumEnd + ele.hldTotNumEnd;
                    totalobj.hldFlPctEnd =
                        totalobj.hldFlPctEnd + ele.hldFlPctEnd;
                    totalobj.hldTotPctEnd =
                        totalobj.hldTotPctEnd + ele.hldTotPctEnd;
                    arrOrder[7] = totalobj;
                });
                console.log("arrOrder", arrOrder);
                //处理Pie数据
                arrOrder.forEach((ele, index) => {
                    console.log(ele, index);
                    if (
                        ele.hldTotNumEnd !== null &&
                        ele.orgTypeName !== "合计"
                    ) {
                        let peiobj = {
                            name: ele.orgTypeName,
                            value: changeNumber(ele.hldFlPctEnd, 1),
                        };
                        this.pieDate.seriesData.push(peiobj);
                    }
                });
                this.tableList = [...arrOrder];
                this.pieDate.seriesData.push({
                    name: "非机构持仓",
                    value: changeNumber(100 - totalobj.hldTotPctEnd, 1),
                });

                console.log(11111,changeNumber(100 - totalobj.hldTotPctEnd, 1))
            }
        },
        inte() {
            if (!this.myChart) {
                this.$nextTick(() => {
                    this.myChart = this.$echarts.init(
                        document.getElementById("echarts")
                    );
                    this.myEcharts();
                });
            } else {
                this.$nextTick(() => {
                    this.myEcharts();
                });
            }
        },

        onTime(time, index) {
            this.timeIdx = index;
            this.pieDate.seriesData = [];
            this.handtableData(this.data[time]);
            this.inte();
        },

        myEcharts() {
            //配置图表
            var option = {
                title: {
                    text: "",
                    subtext: "",
                    left: "center",
                },
                tooltip: {
                    trigger: "item",
                    // formatter: "{a} <br/>{b} : {c} ({d}%)",
                    formatter: "{b}  ({c}%)",
                    backgroundColor: "rgba(0,0,0,1)", // 提示框背景颜色
                    textStyle: {
                        fontSize: "14px",
                        color: "#ffffff", // 设置文本颜色 默认#FFF
                    },
                },
                legend: {
                    type: "scroll",
                    orient: "vertical",
                    itemWidth: 10, // 设置图例图形的宽
                    itemHeight: 10, // 设置图例图形的高
                    
                    left: 300,
                    y: "center",
                    formatter: (name) => {
                        let target, percentage;
                        for (
                            let i = 0;
                            i < this.pieDate.seriesData.length;
                            i++
                        ) {
                            if (this.pieDate.seriesData[i].name === name) {
                                target = this.pieDate.seriesData[i].value;
                            }
                        }
                        let arr = [
                            "{a|" + name + "}",
                            "{b|" + target + "%" + "}",
                        ];
                        return arr.join("");
                    },

                    textStyle: {
                        rich: {
                            a: {
                                fontSize: 14,
                                color: "#999999",
                                padding: 10,
                            },
                            b: {
                                fontSize: 14,
                                color: "#CCCCCC",
                            },
                        },
                    },
                },
                series: [
                    {
                        name: "姓名",
                        type: "pie",
                        radius: "75%",
                        center: ["35%", "50%"],
                        data: this.pieDate.seriesData,
                        itemStyle: {
                            normal: {
                                color: function (colors) {
                                    var colorList = [
                                        "#FEFF82",
                                        "#F1A329",
                                        "#AC11DE",
                                        "#F54932",
                                        "#12CAC4",
                                        "#297388",
                                        "#FFA48C",
                                        "#1B64DC",
                                    ];
                                    return colorList[colors.dataIndex];
                                },
                            },
                        },
                        // 设置值域的那指向线
                        labelLine: {
                            show: false,
                        },
                        label: {
                            show: false,
                            position: "inner", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                            // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                            // {a}指series.name  {b}指series.data的name
                            // {c}指series.data的value  {d}%指这一部分占总数的百分比
                            formatter: "{b}",
                            color: "#e6e6e6",
                        },

                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                            },
                        },
                    },
                ],
            };

            this.myChart.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    display: flex;
    .echar_content {
        width: 511px;
        padding: 20px 0px;
        background: #1a1a1f;

        border: 1px solid #000000;
        //  border: 1px solid green;
        .echar_box {
            width: 511px;
            height: 274px;
            // border:1px solid red;
        }
    }

    .w510 {
        width: 510px !important;
    }
    .tableTd {
        flex: 1;
    }
    .h34 {
        box-sizing: border-box;
        min-height: 34px;
        line-height: 34px;
    }
    .orgTypeName {
        padding-left: 10px;
        background: #212126;
        color: #e6e6e6;
        text-align: left;
        width: 90px;
        box-sizing: border-box;
    }
}
</style>


